<template>
  <common-card
    title="今日交易用户数"
    value="81,014">
    <!-- 中间是数据展示图 -->
    <template>
      <v-chart :options="getOptions()"></v-chart>
    </template>
    <template v-slot:footer>
      <span>退货率 </span>
      <span class="emphasis">5.14%</span>
    </template>
  </common-card>
</template>

<script>
import commonCardMixin from '../../mixins/commonCardMixin'
export default {
  mixins: [commonCardMixin],
  methods:{
    getOptions() {
      return {
        color: ['#3398DB'],
        series: [{
          type: 'bar',
          data: [620, 432, 220, 534, 434,342,325,656,23],
          barWidth: '60%'
        }],
        xAxis: {
          type:'category',
          data: ['00:00', '01:00','02:00', '03:00','04:00', '05:00','06:00', '07:00', '08:00','09:00'],
          show: false
        },
        yAxis: {
          show: false
        },
        grid: {
          top: 0,
          bottom: 0,
          left: 0,
          right: 0,
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
